class Enlarge {
    constructor(el){
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.el.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        this.imgsObj = this.el.querySelectorAll('ul li img')


        this.init()
    }
    init ()
    {
        this.outover()
        this.tbenlargeHW()
        this.mask()
        this.smallchange()
    }
    outover ()
    {
        this.imgObj.onmouseover = () =>this.maskObj.style.display=this.enlargeObj.style.display = 'block'
        this.imgObj.onmouseout = () =>this.maskObj.style.display=this.enlargeObj.style.display = 'none'
    }
    getStyle(tagObj, attrName) 
    {
        if (window.getComputedStyle)
        {
            // return window.getComputedStyle(tagObj).attrName
            return window.getComputedStyle(tagObj)[attrName]
        } else {
            // return tagObj.currentStyle.attrName
            return tagObj.currentStyle[attrName]  // 当对象的键是变量时，使用数组语法
        }
    }
    tbenlargeHW ()
    {
        // div.enlarge w = div.mask w * (div.enlarge background / div.img background )
        // div.enlarge h = div.mask h * (div.enlarge background / div.img background )
        let maskW = parseInt(this.getStyle(this.maskObj,'width'))
        let maskH = parseInt(this.getStyle(this.maskObj,'height'))
        let enlarge = this.getStyle(this.enlargeObj,'background-size')
        let enlargeW= parseInt(enlarge.split(' ')[0])
        let enlargeH= parseInt(enlarge.split(' ')[1])
        let imgW = this.imgObj.clientWidth
        let imgH = this.imgObj.clientHeight
        this.enlargeObj.style.width = maskW*(enlargeW/imgW) + 'px'
        this.enlargeObj.style.height= maskH*(enlargeH/imgH) + 'px'
        
       
    }

    mask()
    {
        this.imgObj.onmousemove =  (evt) => {
            let e =evt || window.event
            let x = e.pageX-this.el.offsetLeft-this.maskObj.offsetWidth/2
            let y = e.pageY-this.el.offsetTop-this.maskObj.offsetHeight/2
            if(x<0) x = 0   
            if(y<0) y = 0
            let maxX = this.imgObj.offsetWidth - this.maskObj.offsetWidth
            let maxY = this.imgObj.offsetHeight - this.maskObj.offsetHeight
            if(x>maxX) x = maxX
            if(y>maxY) y = maxY
            this.maskObj.style.left = x + 'px'
            this.maskObj.style.top  = y + 'px'
            this.tbenlarge(x,y)
        }
    }
    tbenlarge(x,y)
    {
        // div.enlarge bc left =    (div.enlarge w / div.mask w) *  div.mask left
        let enlargeW= parseInt(this.getStyle(this.enlargeObj,'width'))
        let enlargeH= parseInt(this.getStyle(this.enlargeObj,'height'))
        let maskW = parseInt(this.getStyle(this.maskObj,'width'))
        let maskH = parseInt(this.getStyle(this.maskObj,'height'))
        let z = (enlargeW/maskW)*x
        let z1 = (enlargeH/maskH)*y
        this.enlargeObj.style.backgroundPosition = `-${z}px -${z1}px`
    }
    smallchange ()
    {
        this.imgsObj.forEach((item,i) =>{
            item.onclick = () => {
                this.el.querySelector('ul li.active').className = ''
                this.el.querySelector(`ul li:nth-of-type(${i+1})`).className = 'active'
                this.imgObj.style.backgroundImage= `url(./imgs/${i+1}.jpg)`
                this.enlargeObj.style.backgroundImage = `url(./imgs/${i+1}.big.jpg)`
            }
            
        })
    }
}   
